<template>
  <el-tabs class="tw-tabs"
    :class="{xnobar: noBar}"
    :type="type"
    v-model="activeName"
    @tab-click="handleClick">
    <el-tab-pane v-for="(item, idx) in resultList"
      :key="idx"
      :label="item.name"
      :name="item.value">
      <span slot="label">
        <img class="xicon"
          :style="{height:iconHeight}"
          v-if="getIcons('default', idx)"
          :src="`${$twApp.fileBaseUrl}${getIcons('default', idx).localPath}`" />
        <img class="xhovericon"
          :style="{height:iconHeight}"
          v-if="getIcons('hover', idx)"
          :src="`${$twApp.fileBaseUrl}${getIcons('hover', idx).localPath}`" />
        <span>{{item.name}}</span>
      </span>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import border from '../tw-lib-base/border/mixins'

export default {
  name: 'tabs',

  mixins: [style, border],

  props,

  data () {
    return {
      activeName: '',
      timer: 0
    }
  },

  computed: {
    resultList () {
      const result = []

      for (const item of this.list) {
        if (['string', 'number'].includes(typeof item)) {
          result.push({
            name: item,
            value: item
          })
        } else {
          result.push(item)
        }
      }

      return result
    },

    valueList () {
      return this.resultList.map(item => item.value)
    },

    style () {
      return Object.assign({
        type: this.type,
        height: this.height,
        fontSize: this.fontSize,
        color: this.color,
        textBold: this.textBold,
        activeColor: this.activeColor,
        backgroundColor: this.backgroundColor,
        tabMarginRight: this.tabMarginRight,
        spacing: this.spacing,
        barHeight: this.barHeight,
        barBgColor: this.barBgColor,
        activeBarHeight: this.activeBarHeight,
        activeBarColor: this.activeBarColor,
        cardBg: this.cardBg,
        activeTextBold: this.activeTextBold,
        cardContentBg: this.cardContentBg,
        cardItemBg: this.cardItemBg,
        cardActiveColor: this.cardActiveColor,
        cardBorderColor: this.cardBorderColor,
        tabItemRadius: this.tabItemRadius,
        cardContentBoxShadow: this.cardContentBoxShadow
      }, this.borderStyle)
    }
  },

  methods: {
    getIcons (type, idx) {
      if (type === 'default') {
        return this.icons[idx]
      } else {
        return this.hoverIcons[idx] || this.icons[idx]
      }
    },

    setStyle () {
      let style = ''

      if (this.hasBorder) {
        const border = `${this.borderSize} ${this.borderType} ${this.borderColor}`

        if (this.type === '') {
          style += `
            ::root .el-tabs__nav-wrap {
              margin-bottom: -${this.borderSize};
            }
          `
        }

        if (this.type === 'border-card') {
          style += `
            ::root.el-tabs--border-card {
              border-radius: ${this.borderRadius};
            }
          `

          if (this.borderPosition.includes(0)) {
            style += `
              ::root.el-tabs--border-card {
                border-top: ${border};
              }
            `
          }

          if (this.borderPosition.includes(1)) {
            style += `
              ::root.el-tabs--border-card>.el-tabs__header {
                border-bottom: ${border};
              }
            `
          }

          if (this.borderPosition.includes(2)) {
            style += `
            ::root.el-tabs--border-card {
                border-left: ${border};
              }
            `
          }

          if (this.borderPosition.includes(3)) {
            style += `
            ::root.el-tabs--border-card {
              border-right: ${border};
            }
          `
          }
        } else {
          style += `
            ::root.tw-tabs>.el-tabs__header {
              border-radius: ${this.borderRadius};
            }
          `

          if (this.borderPosition.includes(0)) {
            style += `
            ::root.tw-tabs>.el-tabs__header {
              border-top: ${border};
            }
          `
          }

          if (this.borderPosition.includes(1)) {
            style += `
            ::root.tw-tabs>.el-tabs__header {
              border-bottom: ${border};
            }
          `
          }

          if (this.borderPosition.includes(2)) {
            style += `
            ::root.tw-tabs>.el-tabs__header {
              border-left: ${border};
            }
          `
          }

          if (this.borderPosition.includes(3)) {
            style += `
            ::root.tw-tabs>.el-tabs__header {
              border-right: ${border};
            }
          `
          }
        }
      }

      if (this.type === '') {
        style += `
          ::root .el-tabs__item {
            background-clip: content-box;
          }

          ::root .el-tabs__item.is-active,
          ::root .el-tabs__item:hover {
            position: relative;
          }

          ::root .el-tabs__item.is-active:after,
          ::root .el-tabs__item:hover:after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: ${this.barHeight};
            background-color: ${this.barBgColor};
          }
        `
      } else {
        style += `
          ::root .el-tabs__item {
            background-color: ${this.cardItemBg || 'transparent'};
          }
        `
      }

      if (this.type === 'card') {
        if (this.tabItemRadius) {
          style += `
          ::root .el-tabs__item {
              border-top-left-radius: ${this.tabItemRadius};
              border-top-right-radius: ${this.tabItemRadius};
            }
          `
        }

        if (this.tabMarginRight) {
          style += `
            ::root .el-tabs__item,
            ::root.el-tabs--card>.el-tabs__header .el-tabs__nav {
              transition: none !important;
              border: none !important;
            }

            ::root .el-tabs__nav-wrap {
              margin-bottom: 0;
            }
          `
        }
      }

      if (this.activeTextBold) {
        style += `
          ::root .el-tabs__item.is-active {
            font-weight: 700;
          }
        `
      }

      if (this.textBold) {
        style += `
          ::root .el-tabs__item {
            font-weight: 700;
          }
        `
      }

      style += `
        ::root.tw-tabs {
          background-color: ${this.backgroundColor || 'transparent'};
        }

        ::root .el-tabs__item {
          height: ${this.height};
          line-height: ${this.height};
          padding: 0 ${parseInt(this.spacing) / 2 + 'px'};
          margin-right: ${this.tabMarginRight || 0};
          font-size: ${this.fontSize};
          color: ${this.color};
        }

        ::root.el-tabs--border-card>.el-tabs__header .el-tabs__item {
          color: ${this.color};
        }

        ::root .el-tabs__item.is-active,
        ::root .el-tabs__item:hover {
          color: ${this.activeColor};
          background-color: ${this.cardActiveColor || 'transparent'};
        }

        ::root .el-tabs__nav-wrap::after {
          height: ${this.barHeight};
          background-color: ${this.barBgColor};
        }

        ::root .el-tabs__active-bar {
          height: ${this.activeBarHeight};
          background-color: ${this.activeBarColor};
        }

        ::root.el-tabs--border-card>.el-tabs__header {
          background-color: ${this.cardBg};
        }

        ::root.el-tabs--card>.el-tabs__header .el-tabs__nav {
          border-color:  ${this.cardBorderColor || 'transparent'};
        }

        ::root.el-tabs--card>.el-tabs__header .el-tabs__item {
          border-left-color: ${this.cardBorderColor || 'transparent'};
        }

        ::root.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
          color: ${this.activeColor};
          background-color: ${this.cardActiveColor};
          border-right-color: ${this.cardBorderColor || 'transparent'};
          border-left-color: ${this.cardBorderColor || 'transparent'};
        }

        ::root.el-tabs--border-card {
          background: ${this.cardContentBg};
          box-shadow: 0 2px 4px 0 ${this.cardContentBoxShadow}, 0 0 6px 0 ${this.cardContentBoxShadow};
        }
      `

      this.addStyle(style)
    },

    handleClick (tab) {
      if (tab && this.preventToggle) {
        window.clearTimeout(this.timer)
      }

      this.$emit('input', this.activeName)
      this.$emit('change', this.activeName)
    },

    handleAutoToggle () {
      const toggleTime = parseInt(this.autoToggleTime)

      if (toggleTime && toggleTime > 0) {
        this.timer = setTimeout(() => {
          let nextIndex = this.valueList.indexOf(this.activeName) + 1

          if (nextIndex >= this.resultList.length) {
            nextIndex = 0
          }

          this.activeName = this.valueList[nextIndex]
          this.handleClick()
          this.handleAutoToggle()
        }, toggleTime)
      }
    }
  },

  mounted () {
    this.activeName = this.value || this.resultList[0].value
    this.handleClick()
    this.handleAutoToggle()
  },

  watch: {
    resultList () {
      this.activeName = this.value || this.resultList[0].value
      this.handleClick()
    },

    value (val) {
      if (this.activeName !== val) {
        this.activeName = val
      }
    },

    autoToggleTime () {
      window.clearTimeout(this.timer)
      this.handleAutoToggle()
    }
  }
}
</script>

<style lang="scss">
@import './css/index.scss';
</style>
